<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" style="width: 800px;margin: 30px auto;">
    <hr>
    <fieldset>
        <legend>用户注册:</legend>
        <form action="success.html">
            <p>
                <label for="">用户名</label>
                <input type="text" class="username">
                <span class="info"></span>
            </p>
            <p>
                <label for="">手机号</label>
                <input type="text" class="username">
                <span class="info"></span>
            </p>
            <p>
                <label for="">密码</label>
                <input type="password" class="password">
                <span class="info"></span>
            </p>
            <p>
                <input type="submit" class="submit" value="提交按钮三">
            </p>
        </form>
    </fieldset>
    <script>
        // 1.表单事件
        // 1-1onchange:表单内容改变事件,失去焦点会触发事件
        // var inputEle=document.querySelector('input');
        // inputEle.onchange=function(){
        //     console.log("事件被触发啦");
        // }

        // 2.表单内容发生变化立刻触发
        //onkeydown
        // var inputEle=document.querySelector('input');
        // inputEle.onkeydown=function(){
        //     console.log("密码输入6-32位");
        // }

        // oninput 表单核心事件，时刻监听表单的输入
        //  var inputEle=document.querySelector('input');
        // inputEle.oninput=function(){
        //     console.log("密码输入6-32位");
        // }

        // 3.onsubmit ：表单提交事件
        // 表单本身具有提交功能。利用form+submit按钮，submit提交基于当前form
        var formEle=document.querySelector('form');
        formEle.onsubmit=function(){
            return false;//提交不过去
        }
    </script>
</body>
</html>